<template>
	<div id="sort">
		<el-container>
		  <el-header style="height: 230px;">
			 <div class="container"style="height:210px; width: 1524px;">
				<div class="header-wrap" style="height: 100px; width: 1524px;" >
					 <div class="logo-left">
				 			  <a href="#" onclick="history.go(-1); return false;">
				 				  <img style="height: 80px;" src="@/assets/imgs/theme/logo.png" alt="logo" />
				 			  </a>
				 </div>
				 <div class="header-right">
				 			<div class="header-right-input">
								<template>
								  <el-select @change="sortProduct(selectvalue)" v-model="selectvalue" filterable placeholder="请选择">
								    <el-option
								      v-for="item in options"
								      :key="item.id"
								      :label="item.productTypeName"
								      :value="item.id">
								    </el-option>
								  </el-select>
								</template>
								  <el-input style="width: 500px;" v-model="input" placeholder="请输入内容" ></el-input>
								  <el-button type="primary" @click="selectProduct">查询</el-button>
							</div>	
							<div class="header-right-icon">
								<el-badge :value="12" class="item"  type="success">
								<a href="#"><i class="el-icon-star-off"></i></a>
								</el-badge>
								<label>收藏</label>
								<a  href="#"><i class="el-icon-user"></i></a><label>个人中心</label>
								<el-badge :value="12" class="item" type="success">
								<a href="#"><i class="el-icon-shopping-cart-2"></i></a>
								</el-badge>
								<label>购物车</label>
							</div>
				 </div>
				</div>
				<div class="header-wrap-2">
					<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" >
					  <el-menu-item index="1">处理中心</el-menu-item>
					  <el-submenu index="2">
					    <template slot="title">商品类型1</template>
					    <el-menu-item index="2-1">商品类型1</el-menu-item>
					    <el-menu-item index="2-2">商品类型2</el-menu-item>
					    <el-menu-item index="2-3">商品类型3</el-menu-item>
					    <el-submenu index="2-4">
					      <template slot="title">商品类型4</template>
					      <el-menu-item index="2-4-1">选项1</el-menu-item>
					      <el-menu-item index="2-4-2">选项2</el-menu-item>
					      <el-menu-item index="2-4-3">选项3</el-menu-item>
					    </el-submenu>
					  </el-submenu>
					  <el-menu-item index="3" disabled>导航1</el-menu-item>
					  <el-menu-item index="4" >导航2</el-menu-item>
					  <el-menu-item index="5" >导航3</el-menu-item>
					  <el-menu-item index="6" >导航4</el-menu-item>
					  <el-menu-item index="7" >导航5</el-menu-item>
					  <el-submenu index="8">
						  <template slot="title">导航6</template>
						  <el-menu-item index="2-1">商品类型1</el-menu-item>
						  <el-menu-item index="2-2">商品类型2</el-menu-item>
						  <el-menu-item index="2-3">商品类型3</el-menu-item>
					  </el-submenu>
					  <el-menu-item index="9"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
					</el-menu>
					<div class="header-wrap-2-right hotline">
						<img style="width: 45px; margin-right: 8px;" src="@/assets/imgs/theme/daohang.png" alt=""/>
						<p class="header-wrap-2-right-p">1900 - 888</p>
						<span class="header-wrap-2-right-span" >24/7 Support Center</span>
					</div>
				</div>
				
			 </div>
			
		  </el-header>
		  <el-main>
		  		  <template>
		  		    <el-carousel indicator-position="outside">
		  		      <el-carousel-item v-for="x in item" :key="x.id">
		  		        <h3><img style=" width:1200px;margin-left: 60px;"  :src="x.img"/></h3>
		  		      </el-carousel-item>
		  		    </el-carousel>
		  		  </template>
		  </el-main>
		  
		  <div class="section-title">
		  <div class="title">
		  	<h3 style="color: #253D4E;">{{productName.productTypeName}}</h3>
		  </div>
		    </div>
		    <el-row style="margin-top: 50px; margin-left: -20px;">
		      <el-col :span="4" v-for="(f, index) in sort" :key="index" :offset="index > 0 ? 1 : 1" style="margin-left: 7.16667%">
		        <el-card :body-style="{ padding: '0px' }" class="type-a">
		          <img :src="f.imgUrl" class="image" @click="productD(f.id)" >
		          <div style="padding: 14px;">
		            <span><a href="#" onclick="return false;"  @click="productD(f.id)">{{f.productName}}</a></span>
		  			<span style="margin-left: 20px; color:#3BB77E ;">{{f.productPrice}}元</span>
		            <div class="bottom clearfix">
		              <time class="time" >{{ f.productDetail }}</time>
		              <el-button type="text" class="ShoppingBut">
		  				<a href="#" onclick="return false;"  @click="productD(f.id)" class="gouwuche"><i  class="el-icon-shopping-cart-full"><span >加入</span></i></a>
		  			</el-button>
		            </div>
		          </div>
		        </el-card>
		      </el-col>
		    </el-row>
		  
		  </el-container>
	</div>
</template>

<script>
	export default{
		data() {
			return{
				//分类商品名称
				productName:'',
				//分类商品
				sort:[],
				item:[
					{id:1,gg:"广告一",img:require("@/assets/imgs/login/touxiang.jpg")},
					{id:2,gg:"广告一",img:require("@/assets/imgs/login/touxiang.jpg")},
				],
				//商品分类下拉框的值
				options: [],
				//分类下拉框的id 值
				selectvalue:'',
				//搜索文本框
				input:'',
				activeIndex: '2',
			}
		},
		created() {
			 this.option(),
			 this.initializeSort(),
			 this.initializeSortName()
		},
		methods:{
			async productD(id){
				 sessionStorage.setItem('productId', id)
				 this.$router.push('/productdetails')
			},
			//初始化商品分类名称
			async initializeSortName(){
				const id=sessionStorage.getItem('sort')
				console.log(123,id)
				const {data : res}=await this.$http.post(`/buy/productType/getProTypeName/${id}`,id)
				this.productName=res
				console.log(res)
			},
			//初始化商品
			async initializeSort(){
				const id=sessionStorage.getItem('sort')
				console.log(123,id)
				const {data : res}=await this.$http.post(`/buy/product/sortProduct/${id}`,id)
				this.sort=res
				console.log(res)
			},
			//下拉框分类查询不同的商品
			async sortProduct(id){
				console.log(123,id)
				const {data : res}=await this.$http.post(`/buy/product/sortProduct/${id}`,id)
				this.sort=res
				
				const typeId=sessionStorage.getItem('sort')
				const {data : res1}=await this.$http.post(`/buy/productType/getProTypeName/${id}`,id)
				this.productName=res1
				console.log("typeId:",res1)
			},
			//主页下拉搜索框
			async option(){
				const {data: res} =  await this.$http.post('/buy/productType/getProType')
					this.options=res
			},
			//主页文本搜索框
			async selectProduct(){
				const	input=this.input
					const {data : res} =await this.$http.post(`/buy/product/selectProduct`,{"input":input})
					this.sort=res
					
					console.log(res)
			},
			handleSelect(key, keyPath) {
			       console.log(key, keyPath);
			     },
		}
	}
</script>

<style scoped>
	.gouwuche{
			width: 85px;
			height: 36px;
			border: 1px solid #3BB77E;
			background-color: #DEF9EC;
			border-radius: 4px;
			display: inline-block;
			margin-left: 26px;
			span{
				font-size: 18px;
				color:#3BB77E ;
				margin-left: 7px;
				margin-top: 10px;
			}
			i {
				font-size: 18px;
				color:#3BB77E ;
				margin-left: 7px;
				margin-top: 10px;
			}
		}
		.gouwuche:hover{
			background-color: #3BB77E;
			 transform: translateY(-2px);
			span{
				
				color: white;
			}
			i {
				color: white;
			}
		}
		.allspan{
			/* 行内元素 转换为 块级元素 */
						display: block;
						width: auto;
						height: auto;
						color:black;
		}
		 .time {
		    font-size: 13px;
		    color: #999;
		  }
		  .time2{
		     font-size: 13px;
		     color: #999;
		   }
		  .bottom {
		    margin-top: 13px;
		    line-height: 12px;
		  }
		
		  .button {
		    padding: 0;
		    float: right;
		  }
		
		  .image {
		    width: 100%;
		    display: block;
			 cursor: pointer;
		  }
		  .image2 {
		    width: 100%;
		    display: block;
		  }
		
		  .clearfix:before,
		  .clearfix:after {
		      display: table;
		      content: "";
		  }
		  
		  .clearfix:after {
		      clear: both
		  }
		.clearfix2:before,
		.clearfix2:after {
		    display: table;
		    content: "";
		}
		
		.clearfix2:after {
		    clear: both
		}
		
		.card-1{
			margin-bottom: -90px;
		}
		.section-title2 {
			height: 100px;
		    display: -webkit-box;
		    display: -ms-flexbox;
		    display: flex;
		    -webkit-box-align: center;
		    -ms-flex-align: center;
		    align-items: end;
		    margin-bottom: -150px;
		    position: relative;
		    -webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		    justify-content: space-between;
		}
		.section-title2 .title2 {
			height: 100px;
		    display: -webkit-box;
		    display: -ms-flexbox;
		    display: flex;
		    -webkit-box-orient: horizontal;
		    -webkit-box-direction: normal;
		    -ms-flex-flow: row;
		    flex-flow: row;
		    -webkit-box-align: end;
		    -ms-flex-align: end;
		    align-items: flex-end;
		}
		.section-title2 h3 {
		    font-weight: 700;
		    font-size: 32px;
		    margin-right: 30px;
			    margin-top: 300px;
		}
		.section-title2 a.show-all2 {
		    font-size: 16px;
		    color: #7E7E7E;
			    text-decoration: none;
			    cursor: pointer;
				margin-top: 20px;
		}
		
		.section-title3 {
			height: 100px;
		    display: -webkit-box;
		    display: -ms-flexbox;
		    display: flex;
		    -webkit-box-align: center;
		    -ms-flex-align: center;
		    align-items: end;
		    margin-bottom: -150px;
		    position: relative;
		    -webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		    justify-content: space-between;
		}
		.section-title3 .title3{
			height: 100px;
		    display: -webkit-box;
		    display: -ms-flexbox;
		    display: flex;
		    -webkit-box-orient: horizontal;
		    -webkit-box-direction: normal;
		    -ms-flex-flow: row;
		    flex-flow: row;
		    -webkit-box-align: end;
		    -ms-flex-align: end;
		    align-items: flex-end;
		}
		.section-title3 h3 {
		    font-weight: 700;
		    font-size: 32px;
		    margin-right: 30px;
			    margin-top: 300px;
		}
		.section-title3 a.show-all3 {
		    font-size: 16px;
		    color: #7E7E7E;
			    text-decoration: none;
			    cursor: pointer;
				margin-top: 20px;
		}
		
		
		
		
		.type-a{
			margin-bottom: 20px;
			border: 1px solid black;
			a:hover{
				color: #3BB77E;
				 transition: color 0.3s ease;
			}
		}
		
		.type-a:hover{
			border: 1px solid #3BB77E;
			background-color: white;
			 transform: translateY(-2px);
		}
		.type-a2{
			margin-bottom: 20px;
			border: 1px solid black;
			a:hover{
				color: #3BB77E;
				 transition: color 0.3s ease;
			}
		}
		
		.type-a2:hover{
			border: 1px solid #3BB77E;
			background-color: white;
			 transform: translateY(-2px);
		}
		.zz{
			color: #253D4E;
		}
		.zz:hover{
			 color: #3BB77E;
		}
		
		.show-all:hover{
			
			color: #3BB77E;
		}
		.el-row {
		    margin-bottom: 20px;
		    &:last-child {
		      margin-bottom: -230px;
		    }
		  }
		  
		 
		 
		.section-title {
		    display: -webkit-box;
		    display: -ms-flexbox;
		    display: flex;
		    -webkit-box-align: center;
		    -ms-flex-align: center;
		    align-items: end;
		    margin-bottom: -32px;
		    position: relative;
		    -webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		    justify-content: space-between;
		}
		.section-title .title {
		    display: -webkit-box;
		    display: -ms-flexbox;
		    display: flex;
		    -webkit-box-orient: horizontal;
		    -webkit-box-direction: normal;
		    -ms-flex-flow: row;
		    flex-flow: row;
		    -webkit-box-align: end;
		    -ms-flex-align: end;
		    align-items: flex-end;
		}
		.section-title h3 {
		    font-weight: 700;
		    font-size: 32px;
		    margin-right: 30px;
			    margin-top: -22px;
		}
		.section-title a.show-all {
		    font-size: 16px;
		    color: #7E7E7E;
			    text-decoration: none;
			    cursor: pointer;
				margin-top: 20px;
		}
		
		
		 .el-carousel__item h3 {
		    color: #ffffff;
		    font-size: 18px;
		    opacity: 0.75;
		    line-height: 300px;
		    margin: 0;
		  }
		  
		  .el-carousel__item:nth-child(2n) {
		    background-color: #ffffff;
		  }
		  
		  .el-carousel__item:nth-child(2n+1) {
		    background-color: #ffffff;
		  }
		
		p:last-child {
		    margin-bottom: 0;
		}
		.header-wrap-2-right{
			    margin-left: 526px;
		}
		 .hotline p {
		    color: #3BB77E!important;
		}
		.header-wrap-2-right-span {
		    font-weight: 500;
		    font-size: 12px;
		    font-family: "Lato",sans-serif;
		    color: #7E7E7E;
		    display: block;
		    letter-spacing: .9px;
			margin-top: 25px;
			margin-right: 20px;
		}
		
		p {
		    font-size: 1rem;
		    font-weight: 400;
		    line-height: 24px;
		    margin-bottom: 5px;
		    color: #7E7E7E;
			    margin: 0;
			    padding: 0;
			    border: 0;
			    font-size: 100%;
			    font: inherit;
			    vertical-align: baseline;
				    margin-top: 0;
				    margin-bottom: 1rem;
					    margin-right: -155px;
		}
	.hotline p {
	    color: #3BB77E;
	    font-size: 26px;
	    font-weight: 700;
	    font-family: "Quicksand",sans-serif;
	    display: block;
	    line-height: 1;
	}
		.header-wrap-2{
			height: 74px;
			width: 1564px;
			border-top: 1px solid  darkgray;
			border-bottom: 1px solid  darkgray;
			margin-top: 110px;
		margin-left: -1543px;
		}
		.header-right{
			margin-left: -70px;
		}
		.header-right-icon{
			margin-left: 100px;
			label{
				color: darkgray;
			}
			i{
				font-size: 30px;
			}
			a{
				margin-left: 3px;
				padding: 3px;
			}
		}
		a{
			text-decoration: none;
			color: #333;
		}
		.header-right-input{
			background-color: #ffffff;
			margin-left: 160px;
		}
		.header-wrap{
			margin-top: -80px;
		}
		#Homepage{
			height: 100%;
		}
		 .el-header, .el-footer {
		    background-color: #ffffff;
		    color: #333;
		    text-align: center;
		    line-height: 60px;
			/* 
			在flex 布局的容器中，
			可以设置justify-content: space-between;实现两对齐
			*/
			display: flex;
			justify-content: space-between;
			/* 当容器是flext，可以设置 align-items: center */
			align-items: center;
			div {
			  display: flex;
			  align-items: center;
			}
			span {
			  margin-left: 20px;
			}
		  }
		  .el-main {
		    background-color: white;
		    color: white;
		    text-align: center;
		    line-height: 160px;
		  }
		    body > .el-container {
		      margin-bottom: 40px;
		    }
</style>